<template>
	<div
		class="page"
		style="padding: 20px 20px 0px 20px; width: 1200px; margin: 0 auto"
	>
		<div class="table-top">
			<el-input
				v-model="tableData.appName"
				style="width: 200px"
				placeholder="请输入应用名称"
			/>
			<div class="right">
				<el-button type="primary" @click="search"> 搜索 </el-button>
				<el-button @click="dialogVisible = true"> 新增应用 </el-button>
			</div>
		</div>

		<el-table :data="tableData.rows" border style="width: 100%">
			<el-table-column prop="appName" label="应用名称" width="250">
			</el-table-column>
			<el-table-column prop="appSecret" label="应用密钥"> </el-table-column>
			<el-table-column prop="callbackUrl" label="url"> </el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button @click="editApp(scope.row)"> 编辑 </el-button>
					<el-button @click="deleteRow(scope.row)" type="danger">
						移除
					</el-button>
				</template>
			</el-table-column>
		</el-table>
		<div class="table-bottom">
			<el-pagination
				v-model:current-page="tableData.pageNum"
				v-model:page-size="tableData.pageSize"
				:page-sizes="[10, 20, 30, 40]"
				layout="prev, pager, next"
				:total="tableData.total"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
			/>
		</div>
		<el-dialog
			v-if="dialogVisible"
			v-model="dialogVisible"
			:title="dialogTitle"
			width="600"
			:before-close="handleClose"
		>
			<el-form :model="form" label-width="auto" style="max-width: 600px">
				<el-form-item label="应用名称" prop="appName">
					<el-input v-model="form.appName" />
				</el-form-item>
				<el-form-item label="通信地址" prop="callbackUrl">
					<el-input v-model="form.callbackUrl" />
					<div class="tip">
						<el-icon><WarningFilled /></el-icon>
						ERP、WMS 用于接收 KYB 接口请求的地址，需以 http/https 开头
					</div>
				</el-form-item>
			</el-form>
			<template #footer>
				<div class="dialog-footer">
					<el-button @click="handleClose">取消</el-button>
					<el-button type="primary" @click="submitApp">
						{{ form.id ? "保存" : "添加" }}
					</el-button>
				</div>
			</template>
		</el-dialog>
	</div>
</template>
<script setup>
import { onMounted, reactive, ref, computed } from "vue";
import request from "@/utils/request.js";
import { ElMessage, ElMessageBox } from "element-plus";
onMounted(() => {
	getAppList();
});
let dialogVisible = ref(false);
const handleClose = (done) => {
	dialogVisible.value = false;
	form.value = {
		appName: "",
		callbackUrl: "",
	};
};

let form = ref({
	appName: "",
	callbackUrl: "",
});
let dialogTitle = computed(() => {
	console.log("form", form.value);
	if (form.value.id) {
		return "编辑应用";
	}
	return "添加应用";
});
// 应用列表
let tableData = reactive({
	rows: [],
	total: 0,
	pageNum: 1,
	pageSize: 10,
	appName: "",
});
const getAppList = async () => {
	let res = await request({
		url: "/user/appInfo/list",
		method: "post",
		data: {
			pageNum: tableData.pageNum,
			pageSize: tableData.pageSize,
			appName: tableData.appName,
		},
	});
	if (res.code == 200) {
		tableData.rows = res.rows;
		tableData.total = res.total;
	}
	console.log("getAppList", res);
};
const search = async () => {
	tableData.pageNum = 1;
	getAppList();
};
const addApp = async () => {
	let res = await request({
		url: "/user/appInfo/add",
		method: "post",
		data: {
			appName: form.value.appName,
			callbackUrl: form.value.callbackUrl,
		},
	});
	if (res.code == 200) {
		ElMessage.success(res.msg);
		getAppList();
		dialogVisible.value = false;
	}
	console.log("addApp", res);
};
const saveApp = async () => {
	let res = await request({
		url: "/user/appInfo/edit",
		method: "post",
		data: {
			id: form.value.id,
			appName: form.value.appName,
			callbackUrl: form.value.callbackUrl,
		},
	});
	if (res.code == 200) {
		ElMessage.success(res.msg);
		dialogVisible.value = false;
	}
};
const editApp = async (row) => {
	form.value = {
		id: row.id,
		appName: row.appName,
		callbackUrl: row.callbackUrl,
	};
	dialogVisible.value = true;
};
const deleteRow = async (row) => {
	ElMessageBox.confirm("确认删除吗", "提示", {
		confirmButtonText: "确定",
		cancelButtonText: "取消",
		type: "warning",
		callback: async (action) => {
			if (action === "confirm") {
				let res = await request({
					url: `/user/appInfo/remove/${row.id}`,
					method: "get",
				});
				if (res.code == 200) {
					ElMessage.success(res.msg);
					getAppList();
				}
			}
		},
	});
};
const handleSizeChange = (size) => {
	tableData.pageSize = size;
	getAppList();
};

const handleCurrentChange = (current) => {
	tableData.pageNum = current;
	getAppList();
};
const submitApp = () => {
	if (form.value.id) {
		saveApp(form.value);
	} else {
		addApp(form.value);
	}
};
</script>
<style lang="scss" scoped>
.page {
	padding: 20px;
	.table-top {
		margin-bottom: 10px;
		display: flex;
		justify-content: space-between;
		.right {
			display: flex;
			align-items: center;
		}
	}
	.table-bottom {
		display: flex;
		justify-content: flex-end;
	}
}
.tip {
	display: flex;
	align-items: center;
	color: #999;
	font-size: 12px;
	.el-icon {
		margin-right: 5px;
	}
}
.dialog-footer {
	display: flex;
	justify-content: flex-end;
}
</style>
